<template>
    <view class="p-bot30">
        <view class="BalanceBox">
            <!--  <text class="row j-centert white size32">{{ member_find.v_name }}账户优惠券明细</text> -->
            <!--  <text class="row j-centert white size32 m-top20">{{ date[current].year }}</text> -->
            <!-- <view class="boxDate">
                <view class="iconfont icon-xiangzuo dateIcon" :class="{ opacity05: Left }" @click="changMonth(1)">
                </view>
                <swiper
                    :indicator-dots="false"
                    :current="current"
                    :autoplay="false"
                    class="swiper"
                    display-multiple-items="3"
                    :disable-touch="true"
                    @change="SwiperChange">
                    <swiper-item class="swiper-item"></swiper-item>
                    <swiper-item
                        class="swiper-item"
                        v-for="(item, index) in date"
                        :key="index"
                        :class="{ Active: current == index }"
                        @click="current = index">
                        {{ item.name }}
                    </swiper-item>
                    <swiper-item class="swiper-item"></swiper-item>
                </swiper>
                <view
                    class="iconfont icon-xiangyouxiayiye dateIcon"
                    :class="{ opacity05: Rigth }"
                    @click="changMonth(2)">
                </view>
            </view> -->
            <view class="d-flex f-column">
                <text class="white size30">账户优惠券（张）</text>
                <text class="allMoney">{{ member_find.couponCount }}</text>
            </view>
            <view class="AddMoney" @click="show = true" v-if="authority">
                <view class="iconfont icon-wode-qianbao-chongzhi white size54"></view>
                <text class="white h6 m-top10">赠券</text>
            </view>
            <!-- <view class="changeMoney">
               
            </view> -->
        </view>

        <view class="Tab">
            <u-tabs
                :list="list1"
                @click="click"
                :activeStyle="activeStyle"
                :inactiveStyle="inactiveStyle"
                :current="Cur"
                :scrollable="false"
                lineColor="#333333"></u-tabs>
        </view>

        <view
            class="list"
            :class="{ black: item.state == '1', have: item.state == '2', lose: item.state == '3' }"
            v-for="item in pageData"
            :key="item.log_id">
            <view class="Title">
                <text class="size28">{{ item.couponName }}</text>
                <text class="h6 color_66 m-top10" v-if="item.source_info">{{ item.source_info }}</text>
                <text class="h6 color_66 m-top10">{{ item.validTime }}</text>
            </view>
            <view class="StatesBox">
                <view class="States" @click="UseBtn(item)" v-if="item.state">{{ item.state | coupon_State }}</view>
                <text class="codenum" user-select>{{ item.sn_code }}</text>
            </view>
        </view>

        <u-empty mode="list" text="暂无记录" :marginTop="80" v-if="!pageData.length"></u-empty>

        <view class="fiexView" v-if="show">
            <view class="popBox">
                <view class="iconfont icon-guanbi- color_99 size42 iconguanbi" @click.stop="CloseShow"></view>
                <text class="black size30 bold">赠券前请确认账户是否正确</text>
                <view class="row j-centert p-top30 p-bot30">
                    <picker mode="selector" :range="Coupons" range-key="title" @change="changeCoupons">
                        <view class="size32" :class="cou_id ? 'black' : 'color_99'">{{ CouponTitle }}</view>
                    </picker>
                </view>
                <view class="handleIng">
                    <view class="iconfont icon-jian black size60" @click="subtract"></view>
                    <view class="Place">
                        <input type="number" v-model="couponNum" class="PlaceNum" disabled />
                    </view>
                    <view class="iconfont icon-jia black size56" @click="increase"></view>
                </view>
                <view class="popfot">
                    <view class="lists Cancel" @click.stop="CloseShow">取消赠券</view>
                    <view class="lists white" :class="couponNum ? 'active' : 'bg66'" @click="Presentation"
                        >立即赠券</view
                    >
                </view>
            </view>
        </view>
        <u-popup
            :show="showAfter"
            @close="CancelshowAfter"
            mode="center"
            :round="10"
            closeable
            :closeOnClickOverlay="false">
            <view class="popBox">
                <text class="black size30 bold">是否立即核销</text>
                <text class="black size36 m-top30">{{ log_idItem.couponName }}</text>
                <view class="popfot">
                    <view class="lists Cancel" @click="CancelshowAfter">取消使用</view>
                    <view class="lists white active" @click="Immediate">立即使用</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                date: [],
                current: 6,
                list1: [
                    {
                        name: '全部',
                        state: '',
                    },
                    {
                        name: '待使用',
                        state: '1',
                    },
                    {
                        name: '已使用',
                        state: '2',
                    },
                    {
                        name: '已失效',
                        state: '3',
                    },
                ],
                Cur: 0,
                activeStyle: {
                    color: '#000',
                },
                inactiveStyle: {
                    color: '#666',
                },
                show: false,
                couponNum: 1,

                showAfter: false,
                vid: '',
                Type: 'coupon ',
                getMore: true,
                limit: 10,
                page: 1,
                member_find: '',
                pageData: [], // 使用状态   0关闭 1开启  2已使用 3已过期',
                info: '',
                Coupons: [],
                cou_id: '',
                log_idItem: '',
                operatingPower: '',
            }
        },
        onLoad(opt) {
            if (opt.vid) this.vid = opt.vid
            if (opt.Type) this.Type = opt.Type
            const Year = new Date().getFullYear()
            const Month = new Date().getMonth() + 1
            for (let i = 0; i < Month; i++) {
                let stringMonth = String(i + 1)
                this.date.push({
                    year: Year,
                    month: stringMonth.padStart(2, '0'),
                    name: `${stringMonth}月`,
                })
            }
            this.current = this.date.length - 1
            this.user_query_list()
            this.getCoupon()
        },
        methods: {
            user_query_list() {
                this.$showLoading('')
                this.$http
                    .get({
                        url: '/singleSaleManageApi/user_query_list',
                        data: {
                            page: this.page,
                            limit: this.limit,
                            // thisY: this.date[this.current].year,
                            // thisM: this.date[this.current].month,
                            type: this.Type,
                            down_v_id: this.vid,
                            v_id: this.vid,
                            state: this.list1[this.Cur].state,
                            shop_id: uni.getStorageSync('store_id'),
                        },
                    })
                    .then((res) => {
                        this.$hideLoading()
                        if (res.errcode != '100') return this.$Toast(res.msg)
                        const result = res.data
                        this.member_find = res.member_find
                        if (res.operatingPower) this.operatingPower = res.operatingPower
                        const response = result.list || []
                        this.page == 1 ? (this.pageData = response) : (this.pageData = [...this.pageData, ...response])
                        this.info = result
                        if (response.length < this.limit) this.getMore = false
                    })
            },
            getCoupon() {
                this.$http
                    .get({
                        url: '/singleSaleManageApi/getCoupon',
                        data: {
                            v_id: this.vid,
                            shop_id: uni.getStorageSync('store_id'),
                        },
                    })
                    .then((res) => {
                        if (res.code != '100') return this.$Toast(res.msg)
                        const result = res.data || []
                        this.Coupons = result
                    })
            },
            Presentation() {
                if (!this.cou_id || +this.couponNum < 1) return
                this.$http
                    .post({
                        url: '/singleSaleManageApi/addCoupon',
                        data: {
                            v_id: this.vid,
                            down_v_id: this.vid,
                            shop_id: uni.getStorageSync('store_id'),
                            coupon_id: this.cou_id,
                            num: this.couponNum,
                        },
                    })
                    .then((res) => {
                        if (res.code != '100') return this.$Toast(res.msg)
                        this.cou_id = ''
                        this.show = false
                        this.couponNum = 1
                        this.$Toast(res.msg)
                        this.Continue()
                    })
            },

            UseBtn(item) {
                if (item.state != 1) return
                this.log_idItem = item
                this.showAfter = true
            },
            Immediate() {
                // 核销券 立即使用
                if (!this.log_idItem) return
                this.$http
                    .post({
                        url: '/singleSaleManageApi/verificationCoupon',
                        data: {
                            v_id: this.vid,
                            down_v_id: this.vid,
                            shop_id: uni.getStorageSync('store_id'),
                            log_id: this.log_idItem.log_id,
                        },
                    })
                    .then((res) => {
                        if (res.code != '100') return this.$Toast(res.msg)
                        const Index = this.pageData.findIndex((item) => item.log_id == this.log_idItem.log_id)
                        this.pageData[Index].state = '3'
                        this.CancelshowAfter()
                        this.$Toast(res.msg)
                    })
            },
            CancelshowAfter() {
                this.showAfter = false
                this.log_idItem = ''
            },
            click(event) {
                this.Cur = event.index
                this.Continue()
            },
            subtract() {
                if (+this.couponNum <= 1) return
                ;+this.couponNum--
            },
            increase() {
                ;+this.couponNum++
            },
            changMonth(Val) {
                if (this.current == 0 && Val == 1) return
                if (this.current == this.date.length - 1 && Val == 2) return
                Val == 1 ? this.current-- : this.current++
                this.Continue()
            },
            SwiperChange(e) {
                this.current = e.detail.current
                this.Continue()
            },
            Continue() {
                this.page = 1
                this.getMore = true
                this.user_query_list()
            },
            changeCoupons(e) {
                const Index = e.detail.value
                this.cou_id = this.Coupons[Index].cou_id
            },
            CloseShow() {
                this.show = false
                this.couponNum = 1
                this.cou_id = ''
            },
        },
        computed: {
            Left() {
                return this.current == 0 ? true : false
            },
            Rigth() {
                return this.current == this.date.length - 1 ? true : false
            },
            CouponTitle() {
                if (!this.cou_id) return '点击选择优惠券'
                const Item = this.Coupons.find((item) => item.cou_id == this.cou_id)
                return Item.title
            },
            authority() {
                if (!this.operatingPower) return
                if (this.Type == 'coupon' && this.operatingPower.operatingCoupon == '1') return true
            },
        },
        onReachBottom() {
            if (!this.getMore) return
            this.page++
            this.user_query_list()
        },
        watch: {
            member_find(newVal, oldVal) {
                if (newVal) this.$common.BarTitle(`${newVal.v_name}账户优惠券明细`)
            },
        },
        filters: {
            coupon_State(state) {
                let State = +state
                switch (State) {
                    case 1:
                        return '立即使用'
                        break
                    case 2:
                        return '已使用'
                        break
                    case 3:
                        return '已失效'
                }
            },
        },
    }
</script>
<style>
    page {
        background-color: #f8f8f8;
    }
</style>
<style lang="scss" scoped>
    .BalanceBox {
        width: 100%;
        padding: 60rpx 50rpx;
        background-color: #006666;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .boxDate {
        width: 100%;
        height: 80rpx;
        border-radius: 40rpx;
        background-color: rgba(255, 255, 255, 0.4);
        margin-top: 24rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
    }

    .dateIcon {
        color: #fff;
        font-size: 30rpx;
        padding: 20rpx;
    }

    .swiper {
        flex: 1;
        height: 100%;
    }

    .swiper-item {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 28rpx;
    }

    .Active {
        font-size: 36rpx;
    }
    .changeMoney {
        width: 100%;
        display: flex;
        align-items: center;
    }
    .allMoney {
        color: #fff;
        font-size: 52rpx;
        margin-top: 10rpx;
    }
    .AddMoney {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .Tab {
        width: 100%;
        height: 84rpx;
        background-color: #fff;
    }
    .list {
        width: 710rpx;
        margin: 0 auto;
        background-color: #fff;
        padding: 24rpx;
        margin-top: 24rpx;
        border-radius: 10rpx;
        display: flex;
    }
    .Title {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-right: 24rpx;
    }
    .States {
        width: 150rpx;
        height: 50rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        background-color: #009933;
        color: #ffffff;
    }
    .StatesBox {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .codenum {
        font-size: 34rpx;
        margin-top: 10rpx;
    }
    .lose text {
        color: #a69999;
    }
    .lose .States,
    .have .States {
        background-color: #999999;
    }
    .have .codenum {
        color: #ff0084;
    }
    .popBox {
        width: 710rpx;
        background-color: #ffffff;
        padding: 50rpx 24rpx 40rpx 24rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 10rpx;
        position: relative;
    }
    .iconguanbi {
        position: absolute;
        right: 24rpx;
        top: 24rpx;
    }
    .handleIng {
        display: flex;
        align-items: center;
        margin-top: 30rpx;
    }
    .Place {
        width: 100px;
        height: 80rpx;
        border-bottom: 1px solid #e4e4e4;
    }
    .PlaceNum {
        width: 100%;
        height: 100%;
        font-size: 52rpx;
        text-align: center;
    }
    .popfot {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 40rpx;
    }
    .lists {
        width: 300rpx;
        height: 82rpx;
        border-radius: 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30rpx;
    }
    .Cancel {
        background-color: #ccc;
    }
    .active {
        background-color: #006633;
    }
    .fiexView {
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
